<template>
    <el-form-item :label="title">
        <el-cascader :data="dataSource" :load-data="loadData" @on-change="selected" v-model="currentValue" :disabled="disabled"></el-cascader>
    </el-form-item>
</template>
<script>
import { API } from '@/customized/http/api';
import Qs from 'qs';
export default {
    name: 'areacascader',
    components: {

    },
    props: {
        value: {
            type: Array,
            default () {
                return [];
            }
        },
        title: {
            type: String,
            default () {
                return "";
            }
        },
        disabled: {
            type: Boolean,
            default () {
                return false;
            }
        }
    },
    watch: {
        currentValue() {
            this.$emit('input', this.currentValue);
        }
    },
    data() {
        return {
            currentValue: this.value,
            dataSource: []
        }
    },
    created() {
        console.log(this.value);
    },
    mounted() {
        this.$nextTick(() => {
            API.subArea({ code: "0" })
                .then((res) => {
                    let areaList = res.data;
                    areaList.forEach((area, index) => {
                        area.value = area.code;
                        if (area.code.length < 6) {
                            area.loading = false;
                            area.children = [];
                        }
                    })

                    this.dataSource = areaList;
                }).catch((error) => {
                    console.log(error);
                });
        });
    },
    beforeDestroy() {

    },
    methods: {
        loadData(item, callback) {
            item.loading = true;
            API.subArea({ code: item.value })
                .then((res) => {
                    let areaList = res.data;
                    areaList.forEach((area, index) => {
                        area.value = area.code;
                        if (area.code.length < 6) {
                            area.loading = false;
                            area.children = [];
                        }
                    })
                    item.children = areaList;
                    item.loading = false;

                    if (typeof callback === 'undefined') return;
                    callback();
                }).catch((error) => {
                    console.log(error);
                });
        },
        selected(value, selectedData) {
            this.$emit('input', value);
        }
    }
}
</script>
<style>
</style>